聯系我們
導讀：曾幾何時，每次交互稿都是徒手畫，或者截個圖在現有的界面上改造。漸漸感到同一平臺，每個版本都有很多重復勞動，是時候做個交互組件庫了~什么是組件庫？就是類似axure左側欄的這一坨
發表日期：2020-02-13
文章編輯：興田科技
瀏覽次數：6408
標簽：
曾幾何時，每次交互稿都是徒手畫，或者截個圖在現有的界面上改造。漸漸感到同一平臺，每個版本都有很多重復勞動，是時候做個交互組件庫了~
什么是組件庫？
就是類似axure左側欄的這一坨標準控件，方便直接拖拽使用。
但如何制作滿足自己產品需要的交互組件庫，一開始是模糊的。最初只是根據自己的需要隨便列一些出來，在做的過程中逐漸清晰。
交互組件庫的作用：
提高個人工作效率方便多人合作使交互文檔具有統一美哪些東西可以做成交互組件？
只需記住一點：當你感覺到某種UI組合，每次都需要重新畫一遍的時候，就可以考慮把這種UI組合做成交互組件。
上面所說的“重復勞動”對不同人來說可能定義不盡相同。比如對我來說，即使把Tab的選中狀態變一下，也是一種重復勞動。那我就會把不同Tab的選中狀態都做一份。這樣等到要制作“我的音樂”相關交互的時候，直接把下面第二個組件拖過去就可以了。
但對于某些Tab組合來說，每個Tab底下的內容可能是差不多的，做交互的時候往往只需要表達第一個Tab下的頁面就可以了。這種我就只把第一個Tab的選中狀態做一下。總得來說，怎樣對自己方便就怎樣做。
交互組件應該具備的特點：
組件組件，最大的一個特點就是可組合性。整理的時候，思考哪些UI組合是不同頁面都會共用的，把這些元素剝離出來，就成了交互組件。根據自己的經驗，我會把組件歸為幾大類：
頂欄類：
導航類：
彈窗類：
彈出浮層類：
toast類：
列表類：
鍵盤類：
icon類：
另外，一些常用的主界面和內容頁我也會做成組件。這樣當我要拿搜索頁說事兒的時候，就可以直接把整個搜索頁拖過去，而不需要花時間再搭一遍積木了。
單個交互組件應該具備的特點：可編輯性。pNG圖標、文字、選中……每一個元素都是可以單獨編輯的。
組件的顏色？
盡量以黑(性)白(冷)灰(淡)風格為主。
如何把各種組件想全？
不用想全，邊做邊補。所以不同平臺的交互組件庫應該有專人維護更新，才能保證組件庫始終好用。這點其實知易行難，一定要提醒自己“磨刀不誤砍柴工”。
組件邊上需要寫說明文字嗎？
個人喜好組件邊上不寫任何說明文字，組件的名字已經反映在axure文檔的側導航上。只要側導航分類符合心智模型（好找），頁面上清清爽爽的組件（方便拖拽），就能滿足我的需求了。
組件庫是給畫交互稿的人用的，不是給別人看的。給別人看的是另外一種東西，交互規則庫，那種需要說明文字。
因此，判斷一個交互組件庫是否好用的標準是：
你自己是不是經常使用自己的組件庫別人樂不樂意使用你的組件庫更多新聞
2020
關于網站建設，DIY自助建站工具（站長工具），主要是通過使用模板和內容管理系統來建設及更新網站。使得網站建設與維護都變得容易起來。許多主機服務提供商都
View details
2020
關于網站建設，總有很多人問我百度怎么了？有什么變化，為什么不更新等等諸如此類的問題。不論是否百度做過算法調整，或許只要因為某些事情百度不更新，也會有
View details
2020
關于網站建設，當搜索引擎的算法改變或者加強時，導致一些網站的某些關鍵字排名消失，一些管理員就說他們的網站消失了。實際上并非如此，在搜索引擎算法改變
View details
2020
曾幾何時，每次交互稿都是徒手畫，或者截個圖在現有的界面上改造。漸漸感到同一平臺，每個版本都有很多重復勞動，是時候做個交互組件庫了~什么是組件庫？就是類似axure左側欄的這一坨
View details
